<template>
  <div class="app-container">
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <span class="role-span">课表详情</span>
        <div id="opt" style="float: right">
          <el-button-group>
            <el-button :class="{active: timeType === 1}" :autofocus="true" type="plain" size="small" @click="switchType(1)">本周课表</el-button>
            <el-button :class="{active: timeType === 2}" type="plain" size="small" @click="switchType(2)">本月课表</el-button>
            <el-button :class="{active: timeType=== 3}" type="plain" size="small" @click="switchType(3)">近3月课表</el-button>
          </el-button-group>
        </div>
      </div>

      <el-table v-loading="loading" :data="data">
        <el-table-column type="index" label="序号" width="55"/>
        <el-table-column prop="className" label="班级名称"/>
        <el-table-column prop="courseName" label="课程名称"/>
        <el-table-column prop="seqNo" label="课次">
          <template slot-scope="scope">
            第{{ scope.row.seqNo }}节课
          </template>
        </el-table-column>
        <el-table-column prop="date" label="上课日期"/>
        <el-table-column prop="timeRange" label="上课时间"/>
        <el-table-column prop="statusTxt" label="状态"/>
      </el-table>

      <!--分页组件-->
      <div class="pg-wrapper">
        <el-pagination
          :total="total"
          layout="total, prev, pager, next, sizes, jumper"
          @size-change="sizeChange"
          @current-change="pageChange"/>
      </div>
    </el-card>
  </div>
</template>

<script>
import initData from '@/mixins/initData'

export default {
  mixins: [initData],
  data() {
    return {
      loading: false,
      teacherId: 0,
      timeType: 1
    }
  },
  mounted() {
    this.teacherId = this.$route.params.id
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    beforeInit() {
      this.url = 'teacher/schedules'
      this.params = {
        page: this.page,
        size: this.size,
        teacherId: this.teacherId,
        timeType: this.timeType
      }
      return true
    },
    switchType(timeType) {
      this.timeType = timeType
      this.init()
    }
  }
}
</script>

<style>
.active {
  color: #409eff;
  background: #ecf5ff;
  border-color: #b3d8ff;
}
</style>

